<template>
  <el-dialog
    title="产品详情"
    v-model="visible"
    width="80%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <div class="top">
      <h4>合同：{{ title }}</h4>
      <el-button type="primary" @click="handleExport">导出</el-button>
    </div>
    <scTable ref="table" :apiObj="apiObj" :params="params" row-key="id" stripe>
      <el-table-column
        label="产品名称"
        prop="name"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="规格型号"
        prop="specification"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="材质"
        prop="vproductMaterial"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="备注"
        prop="vproductRemark"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="合同数量"
        prop="num"
        width="100"
        v-if="source == 0"
      ></el-table-column>
      <el-table-column
        label="退货重做数量"
        prop="num"
        width="100"
        v-if="source == 1"
      ></el-table-column>
      <el-table-column
        label="已生产数量"
        prop="produceNum"
        width="100"
      ></el-table-column>
      <el-table-column
        label="发货数量"
        prop="deliverNum"
        width="100"
        v-if="source == 1"
      ></el-table-column>
      <el-table-column label="产品状态" prop="status" width="100">
        <template #default="scope">
          <p v-if="scope.row.produceStatus == 0">未生产</p>
          <p v-if="scope.row.produceStatus == 1" style="color: green">生产中</p>
          <p v-if="scope.row.produceStatus == 2" style="color: #2bd814">
            已完成
          </p>
        </template>
      </el-table-column>
      <el-table-column label="排产状态" prop="schedulingStatus" width="200">
        <template #default="scope">
          <p v-if="scope.row.schedulingStatus == 0">未排产</p>
          <p v-if="scope.row.schedulingStatus == 1" style="color: green">
            部分排产
          </p>
          <p v-if="scope.row.schedulingStatus == 2" style="color: #2bd814">
            已完成
          </p>
        </template>
      </el-table-column>
    </scTable>
    <!-- <template #footer>
      <el-button @click="visible = false">取 消</el-button>
    </template> -->
  </el-dialog>
</template>
  
<script>
import { exportFile } from "@/utils/exportFile"
export default {
  data () {
    return {
      visible: false,
      apiObj: this.$API.produce.produceProducts.selectProductsByProduceId,
      params: {
        produceId: '',
      },
      productList: [], //生产产品详情
      title: '',
      source: ''
    }
  },

  methods: {
    //显示
    open (data) {
      this.visible = true
      this.title = data.contractName
      this.params.produceId = data.id
      this.source = data.source
    },
    // 导出
    async handleExport () {
      let res = await this.$API.produce.exportProduceProducts.get({ produceId: this.params.produceId })
      exportFile(res, '生产清单.xls')
    }

  }
}
</script>  
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
}
</style>